<template>
	<view class="box">
		<view class="egg-box">
			<view @click="smashedEgg(item,index)" v-for="(item, index) in giftArr" :key="item.id" class="item">
				<view class="vg-parent">
					<view class="egg-size">
						<view v-if="item.sort == currentSelect" class="egg-pic"></view>
						<view class="vg-wfull vg-hfull" v-else>
							<view class="vg-wfull vg-hfull" v-if="item.isOpen">
								<view v-if="item.type==1" class="item-img  opentype2"></view>
								<view v-else class="item-img"></view>
							</view>
							<view v-else class="item-img unopen" :class="item.sort == currentIndex ? 'active': ''"></view>
						</view>
					</view>
					<view v-if="item.sort == currentIndex && !item.isOpen" class="text-box">
						<image class="txt-img" mode="widthFix" src="../../static/jbdu-golden_egg/tip.png"></image>
					</view>
					<view v-if="item.sort == currentIndex && !item.isOpen" class="hammer-box">
						<image class="hammer-img" :class="item.sort == currentIndex ? activeName : ''" mode="widthFix" src="../../static/jbdu-golden_egg/hammer-back.png"></image>
					</view>
					<view v-if="item.sort == currentSelect" class="hammer-box">
						<image class="hammer-img" :class="item.sort == currentSelect ? 'active' : ''" mode="widthFix" src="../../static/jbdu-golden_egg/hammer.png"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'Index',
		data() {
			return {
				animate: false,
				infoArr: [], // 滚动消息
				ruleShow: false,
				coreShow: false,
				nocoreShow: false,
				luckbagShow: false,
				getcoreShow: false,
				currentIndex: 0,
				runArr: [1, 2, 3, 6, 5, 4], // 运行中金蛋选中顺序
				runArrDefault: [1, 2, 3, 6, 5, 4], // 初始金蛋顺序
				giftArr: [{
						id: 1,
						sort: 1,
						isOpen: 0,
						type: 0
					}, // 金蛋信息
					{
						id: 2,
						sort: 2,
						isOpen: 0,
						type: 0,
						x: 1,
						y: 0
					},
					{
						id: 3,
						sort: 3,
						isOpen: 0,
						type: 0,
						x: 2,
						y: 0
					},
					{
						id: 4,
						sort: 4,
						isOpen: 0,
						type: 0,
						x: 0,
						y: 1
					},
					{
						id: 5,
						sort: 5,
						isOpen: 0,
						type: 0,
						x: 1,
						y: 1
					},
					{
						id: 6,
						sort: 6,
						isOpen: 0,
						type: 0,
						x: 2,
						y: 1
					}
				],
				timer1: null,
				currentSelect: 0,
				activeName: '', // 用于锤子移动动画类
				isLogin: false, // 是否登录
				loginShow: false, // 是否显示登录弹窗
				userInfov: {

				}, // 个人信息
				gifts: [], // 奖品列表
				consumeGold: 0, // 每次消耗金币数
				maskNumber: 6, // 剩余门板数
				playNumber: 1, // 剩余次数
				openCount: 0, // 打开金蛋的个数
				currentCore: 0, // 当前抽奖金币显示数
				isNew: false // 版本是否高于2.8.11，高于为true
			}
		},
		components: {

		},
		computed: {
			// ...mapState({
			//   checkoutStatus: state => state.cart.checkoutStatus,
			//   products1: state => state.products.all
			// }),
			// ...mapGetters('cart', {
			//   products: 'cartProducts',
			//   total: 'cartTotalPrice'
			// })
		},
		created() {
			// this.getGiftSetting();
			this.run()
		},
		mounted() {

		},
		destroyed() {

		},
		methods: {
			draw(item, index) { // 抽奖
				let that = this;
				clearInterval(this.timer1);
				if (!that.playNumber) {
					this.$api.msg('抽奖次数已经使用完毕')
				}
				that.maskNumber--, // 剩余门板数
				that.playNumber--, // 剩余次数
				that.currentIndex = 0;
				that.giftArr[index].isOpen = 1;
				that.currentSelect = item.sort;				
				this.$ComFunJS.ajax({
					method: 'post',
					url: `/api/v1.0/draw/luck`,
					success: (res) => {
						if (!res.data.error) {
							if (res.data.result == '恭喜您中奖') {
								that.$api.msg(res.data.result)
								setTimeout(()=>{
									this.$emit('changezj')
								},1000)
								that.giftArr[index].type = 1; //对应奖品的图片状态值
							} else {
								that.giftArr[index].type = 0;
							}
						} else {
							setTimeout(()=>{
								this.$emit('changezj')
							},1000)
							that.$api.msg(res.data.error)
						}
						let temA = that.runArr.filter(itemv => itemv != item.sort);
						that.runArr = temA;
						setTimeout(function() {
							that.currentSelect = 0;
						}, 1000)
						if (that.openCount < 6) {
							that.openCount++
						} else {
							that.openCount = 6
						}
					}
				})

			},
			run() { // 砸金蛋锤子走动特效
				let that = this;
				this.timer1 = setInterval(function() {
					if (that.runArr.length < 1) {
						return false
					}
					let tempv = that.runArr[0];
					that.currentIndex = that.runArr[0];
					let preIndex = that.runArr[that.runArr.length - 1];
					let temupx = that.giftArr[that.currentIndex - 1].x - that.giftArr[preIndex - 1].x;
					let tempY = that.giftArr[that.currentIndex - 1].y - that.giftArr[preIndex - 1].y;
					that.activeName = 'active' + temupx + tempY;
					that.runArr.shift();
					that.runArr.push(tempv);
				}, 2000)
			},

			smashedEgg(item, index) { // 砸金蛋
				let that = this;
				if (item.isOpen) {
					return false
				}
				if (this.playNumber <= 0) {
					return false
				}
				that.draw(item, index);
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.vg-parent {
		position: relative;
	}

	.vg-text-white {
		color: #fff;
	}

	.vg-wfull {
		width: 100%;
	}

	.vg-hfull {
		height: 100%;
	}

	@-webkit-keyframes shake-egg {
		0% {
			-webkit-transform: translateX(3upx) rotate(2deg);
		}

		100% {
			-webkit-transform: translateX(-3upx) rotate(-2deg);
		}
	}

	/*金蛋动画*/
	@-webkit-keyframes hammer {
		0% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer00 {
		0% {
			transform: translate(0, 0upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer0-1 {
		0% {
			transform: translate(0, 75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer-1-1 {
		0% {
			transform: translate(75upx, 75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer-2-1 {
		0% {
			transform: translate(150upx, 75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer10 {
		0% {
			transform: translate(-75upx, 0upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer1-1 {
		0% {
			transform: translate(-75upx, 75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer20 {
		0% {
			transform: translate(-150upx, 0upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer2-1 {
		0% {
			transform: translate(-150upx, 75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer01 {
		0% {
			transform: translate(0upx, -75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer-11 {
		0% {
			transform: translate(75upx, -75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer-21 {
		0% {
			transform: translate(150upx, -75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer-10 {
		0% {
			transform: translate(75upx, 0upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer-20 {
		0% {
			transform: translate(150upx, 0upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer11 {
		0% {
			transform: translate(-75upx, -75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammer21 {
		0% {
			transform: translate(-150upx, -75upx);
		}

		30% {
			transform: translate(0upx, 0upx);
		}

		80% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammera {
		0% {
			transform: translateY(75upx);
		}

		30% {
			transform: translateY(0upx);
		}

		60% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammerb {
		0% {
			transform: translateX(-75upx);
		}

		30% {
			transform: translateX(0upx);
		}

		40% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammerc {
		0% {
			transform: translateY(-75upx);
		}

		30% {
			transform: translateY(0upx);
		}

		40% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammerd {
		0% {
			transform: translateX(75upx);
		}

		30% {
			transform: translateX(0upx);
		}

		40% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammere {
		0% {
			transform: translateX(75upx) translateY(-75);
		}

		30% {
			transform: translateX(0upx) translateY(0);
		}

		40% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes hammerf {
		0% {
			transform: translateX(150upx) translateY(75);
		}

		30% {
			transform: translateX(0upx) translateY(0);
		}

		40% {
			transform: rotate(-10deg) rotate(-10deg);
		}

		100% {
			transform: rotate(0deg) rotate(0deg);
		}
	}

	@-webkit-keyframes smashedegg {
		0% {
			background-image: url("../../static/jbdu-golden_egg/sharkegg.png");
		}

		40% {
			background-image: url("../../static/jbdu-golden_egg/sharkegg.png");
		}

		45% {
			background-image: url("../../static/jbdu-golden_egg/sharkegg1.png");
		}

		50% {
			background-image: url("../../static/jbdu-golden_egg/sharkegg2.png");
		}

		75% {
			background-image: url("../../static/jbdu-golden_egg/sharkegg3.png");
		}

		100% {
			background-image: url("../../static/jbdu-golden_egg/sharkegg4.png");
		}
	}

	.box {
		width: 100%;
		height: 726uupx;
		background-size: cover;
		padding-top: 10upx;
		position: relative;

		.egg-box {
			width: 100%;
			margin-top: 71upx;
			padding: 0 22upx;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			box-sizing: border-box;

			.item {
				width: 184upx;
				height: 244upx;
				margin-bottom: 14upx;

				.egg-size {
					width: 200upx;
					height: 244upx;
					background: url("../../static/jbdu-golden_egg/egg-floor.png");
					background-size: cover;
					background-position: center;

					.egg-pic {
						width: 100%;
						height: 100%;
						background-size: cover;
						background-position: center;
						background-image: url("../../static/jbdu-golden_egg/sharkegg4.png");
						-webkit-animation-name: smashedegg;
						-webkit-animation-duration: 0.8s;
						-webkit-animation-timing-function: linear;
						-webkit-animation-iteration-count: 1;
					}

					.item-img {
						width: 100%;
						height: 100%;

						&.opentype1 {
							background: url("../../static/jbdu-golden_egg/sharkegg-core.png") no-repeat;
							background-size: cover;
							background-position: center;
						}

						&.opentype2 {
							background: url("../../static/jbdu-golden_egg/sharkegg-luck.png") no-repeat;
							background-size: cover;
							background-position: center;
						}

						&.unopen {
							background: url("../../static/jbdu-golden_egg/sharkegg.png") no-repeat;
							background-size: cover;
							background-position: center;
						}

						&.active {
							-webkit-animation-name: shake-egg;
							-webkit-animation-duration: 0.1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 6;
						}
					}
				}

				.text-box {
					position: absolute;
					width: 160upx;
					height: 80upx;
					top: -30upx;
					left: 50%;
					margin-left: -50upx;

					.txt-img {
						width: 100%;
					}
				}

				.hammer-box {
					width: 128upx;
					height: 128upx;
					position: absolute;
					position: absolute;
					top: -30upx;
					right: -82upx;
					z-index: 99;

					.hammer-img {
						width: 100%;
						position: relative;
						z-index: 99;

						&.active {
							-webkit-animation-name: hammer;
							-webkit-animation-duration: 0.2s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 2;
						}

						&.active00 {
							-webkit-animation-name: hammer0-1;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1000;
						}

						&.active0-1 {
							-webkit-animation-name: hammer0-1;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active-1-1 {
							-webkit-animation-name: hammer-1-1;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active-2-1 {
							-webkit-animation-name: hammer-2-1;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active10 {
							-webkit-animation-name: hammer10;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active1-1 {
							-webkit-animation-name: hammer1-1;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active20 {
							-webkit-animation-name: hammer20;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active2-1 {
							-webkit-animation-name: hammer2-1;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active01 {
							-webkit-animation-name: hammer01;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active-11 {
							-webkit-animation-name: hammer-11;
							-webkit-animation-duration: 1.5s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active-21 {
							-webkit-animation-name: hammer-21;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active-10 {
							-webkit-animation-name: hammer-10;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active-20 {
							-webkit-animation-name: hammer-20;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active11 {
							-webkit-animation-name: hammer11;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}

						&.active21 {
							-webkit-animation-name: hammer21;
							-webkit-animation-duration: 1s;
							-webkit-animation-timing-function: linear;
							-webkit-animation-iteration-count: 1;
						}
					}
				}
			}
		}

		.last-count {
			width: 185upx;
			height: 26upx;
			margin: 32upx auto 18upx auto;
			background: linear-gradient(270deg, rgba(222, 37, 18, 0.32) 0%, rgba(0, 0, 0, 0.10) 49%, rgba(226, 44, 20, 0.32) 100%);
			color: #fff;
			text-align: center;
			font-size: 11upx;
			line-height: 26upx;

			.last-text {
				font-size: 11upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 12upx;
				color: rgba(255, 255, 255, 1);
				text-shadow: 0upx 1upx 2upx rgba(177, 17, 14, 1);
				opacity: 1;
			}

			.small-egg {
				width: 10upx;
				height: 16upx;
			}
		}

	}

	.anim {
		transition: all 0.5s;
		margin-top: -18upx;
	}
</style>
